<!DOCTYPE html>
<html>
<head>
    <title>SSE测试</title>
</head>
<body>
    <h1>SSE连接测试</h1>
    <div id="status">连接状态: 未连接</div>
    <div id="messages"></div>
    
    <script>
        const statusDiv = document.getElementById('status');
        const messagesDiv = document.getElementById('messages');
        
        function addMessage(message) {
            const p = document.createElement('p');
            p.textContent = new Date().toLocaleTimeString() + ': ' + message;
            messagesDiv.appendChild(p);
        }
        
        function connectSSE() {
            const eventSource = new EventSource('http://localhost:8080/logs/stream?filename=process.log&lines=100');
            
            eventSource.onopen = function() {
                statusDiv.textContent = '连接状态: 已连接';
                addMessage('SSE连接已建立');
            };
            
            eventSource.onmessage = function(event) {
                addMessage('收到消息: ' + event.data);
            };
            
            eventSource.onerror = function(event) {
                statusDiv.textContent = '连接状态: 错误';
                addMessage('SSE连接错误: ' + JSON.stringify(event));
            };
        }
        
        // 页面加载后自动连接
        window.onload = function() {
            addMessage('开始连接SSE...');
            connectSSE();
        };
    </script>
</body>
</html>
